<script setup lang="ts" name="Trademark">
import { onBeforeMount, ref } from 'vue';
import {
  reqTrademarkList,
  reqDeleteTrademark
} from '@/api/product/trademark.ts';
import type { Trademark } from '@/api/product/type.ts';
import type { QTableColumn } from 'quasar';
import MyQTable from '@/components/MyQTable.vue';
import FormDialog from './components/FormDialog.vue';
import { useCompRef } from '@/utils/useCompRef.ts';
import { useQuasar } from 'quasar';
import { useRemoveItem } from '@/hooks/useRemoveItem';

const $q = useQuasar();
const loading = ref<boolean>(false);
const trademarkList = ref<Trademark[]>([]);
const getTrademarkList = async (page: number, limit: number) => {
  loading.value = true;
  try {
    const res = await reqTrademarkList({ page, limit });
    trademarkList.value = res.data.records;
    pagination.value.rowsNumber = res.data.total;
  } catch (error) {
    $q.notify({ type: 'negative', message: '获取品牌列表失败' });
  } finally {
    loading.value = false;
  }
};
// 定义表格列
const columns: QTableColumn[] = [
  {
    name: 'index',
    label: '序号',
    field: '',
    align: 'center',
    style: 'width: 80px'
  },
  { name: 'tmName', label: '品牌名称', field: 'tmName', align: 'left' },
  { name: 'logoUrl', label: '品牌LOGO', field: '', align: 'left' },
  { name: 'control', label: '品牌操作', field: 'id', align: 'left' }
];
// 分页选项
// 响应式丢失 要用ref 应该是v-model内部有直接赋值操作
const pagination = ref({
  page: 1, // 当前页数
  rowsPerPage: 5, // 每页数据个数
  rowsNumber: 0, // 总数
  sortBy: '',
  descending: false
});

onBeforeMount(() => {
  getTrademarkList(pagination.value.page, pagination.value.rowsPerPage);
});
// 获取表单组件
const formDialog = useCompRef(FormDialog);
// 传给子元素的事件重新请求数据
const refreshData = () => {
  pagination.value.page = 1;
  getTrademarkList(pagination.value.page, pagination.value.rowsPerPage);
};
// 删除品牌
function removeTrademark(id: number) {
  useRemoveItem(reqDeleteTrademark, id, '确认删除该品牌？', refreshData);
}
</script>

<template>
  <div>
    <!-- main card -->
    <q-card>
      <q-card-section>
        <authority permission="btn.Trademark.add" #="{ hasPermission }">
          <q-btn
            color="primary"
            label="添加品牌"
            icon="add"
            @click="formDialog?.showDialog()"
            :disabled="!hasPermission"
          />
        </authority>
      </q-card-section>
      <q-card-section>
        <my-q-table
          :columns="columns"
          :data="trademarkList"
          v-model:pagination="pagination"
          use-pagination
          @get-table-data="getTrademarkList"
          :loading="loading"
        >
          <!-- logo插槽 -->
          <template v-slot:body-cell-logoUrl="{ row }">
            <q-td style="height: 100px">
              <img :src="row.logoUrl" :alt="row.tmName" style="width: 100px" />
            </q-td>
          </template>
          <!-- 操作 -->
          <template v-slot:body-cell-control="{ row }">
            <q-td style="width: 140px">
              <authority
                permission="btn.Trademark.update"
                #="{ hasPermission }"
              >
                <hint-button
                  size="xs"
                  icon="edit"
                  color="warning"
                  title="修改品牌"
                  class="q-mr-xs"
                  @click="formDialog?.showDialog(row)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>
              <authority
                permission="btn.Trademark.remove"
                #="{ hasPermission }"
              >
                <hint-button
                  size="xs"
                  icon="delete"
                  color="negative"
                  title="删除品牌"
                  @click="removeTrademark(row.id)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>
            </q-td>
          </template>
        </my-q-table>
      </q-card-section>
    </q-card>
    <!-- dialog 对话框 -->
    <FormDialog ref="formDialog" @refresh-data="refreshData" />
  </div>
</template>

<style scoped lang="scss">
/* css深度选择器
   隐藏表格自带分页器
 */
/* .page-q-table :deep(.q-table__control:last-child .q-btn) {
  display: none;
} */
</style>
